<template>
    <div ref="onscroll" style="height:100%;overflow-y:scroll;">
        <slot></slot>
        <div style="text-align:center; font-size:12px;" v-if="loadmore">
            <div v-show="next">
                <spinner type="ios" size="20px"></spinner>
                <van-loading />
            </div>
            <div class="notcemessage"  v-show="!next">没有更多了</div>
        </div>
    </div>
</template>

<script>
import { Spinner} from 'vux'
export default {
    name: "loadmore",
    components : {
        Spinner
    },
    model : {
        event : 'change',
        prop : 'next'
    },
    props : {
        next : {
            type : Boolean,
            default : false,
        },
        sign : {
            type : Number,
            default : 20
        }
    },
	data () {
		return {
			loadmore : false,
		}
	},
	computed: {

	},
	methods:{

	},
	mounted(){
        let vm = this;
        this.$refs.onscroll.addEventListener('scroll',function(){
			const scrollDistance = this.scrollHeight - this.scrollTop - this.clientHeight
			if (scrollDistance <= this.sign && this.next) {
                vm.loadmore = true;
                vm.$emit('onscroll')
			}else{
                vm.loadmore = false;
            }
        });
	},
	created(){

	}
}
</script>

<style lang="less">

</style>
